/**
 * ref: http://tobiasahlin.com/spinkit/
 */

.spinner-flip {
    background-color: #333;
    height: 40px;
    margin: auto;
    -webkit-animation: sk-rotateplane 1s infinite ease-in-out;
    animation: sk-rotateplane 1s infinite ease-in-out;
    width: 40px;
}

@-webkit-keyframes sk-rotateplane {
    0% {
        -webkit-transform: perspective(120px);
    }
    50% {
        -webkit-transform: perspective(120px) rotateY(180deg);
    }
    100% {
        -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg);
    }
}

@keyframes sk-rotateplane {
    0% {
        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    }
    50% {
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
        transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    }
    100% {
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    }
}

.spinner-roller {
    font-size: 10px;
    text-indent: -9999em;
    width: 5em;
    height: 5em;
    border-radius: 50%;
    background: #ffffff;
    background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
    background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
    position: relative;
    -webkit-animation: load3 0.5s infinite linear;
    animation: load3 0.5s infinite linear;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);

    &:before {
        width: 50%;
        height: 50%;
        background: #ffffff;
        border-radius: 100% 0 0 0;
        position: absolute;
        top: 0;
        left: 0;
        content: '';
    }

    &:after {
        background: #E0E0E0;
        width: 80%;
        height: 80%;
        border-radius: 50%;
        content: '';
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }
}

.invert {
    &:before {
        background: #E2E1E0 !important;
    }
    &:after {
        background: #FFFFFF !important;
    }
}

.spinner-roller-reverse {
    background: linear-gradient(to right, #E2E1E0 10%, rgba(255, 255, 255, 0) 42%);

    &::before {
        left: -1px;
        top: -1px;
    }

    &::after {
        background: #fff;
    }
}

@-webkit-keyframes load3 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes load3 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.amination-breath {
    -webkit-animation: breath 2s infinite ease;
    animation: breath 2s infinite ease;
}

@-webkit-keyframes breath {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes breath {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-webkit-keyframes upanddown {
    0% {
        -webkit-transform: translateY(0);
    }
    50% {
        -webkit-transform: translateY(-10px);
    }
    100% {
        -webkit-transform: translateY(0);
    }
}

@keyframes upanddown {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
    }
}
